<%@ page import="com.lagou.assignment.service.StudentService" %>
<%@ page import="com.lagou.assignment.model.Student" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lagou.assignment.model.Admin" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"/>
    <script src="./js/jquery-1.9.1.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //添加用户
        function addStudent() {

            var sid = $("#sid").val();
            var sname = $("#sname").val();
            var sex = $("#sex").val();
            var birthday = $("#birthday").val();
            var email = $("#email").val();
            var comment = $("#comment").val();
            var data = {
                "sid": sid, "sname": sname, "sex": sex, "birthday": birthday, "email": email, "comment": comment
            };
            $.post(
                'add',
                data,
                function (data, status) {
                    if (data === "success") {
                        alert("添加成功");
                        location.reload();
                    }
                }
            );
            close()
        }

        // 显示单个员工数据的方法
        function showStudent() {
            var sid = $("#find_sid").val();
            var sname = $("#find_sname").val();
            if (sid == "" && sname == ""){
                location.reload();
                return;
            }
            var tb1 = $("#tb1");
            $.post(
                "getlist",
                {"sid": sid, "sname": sname},
                function (data) {
                    data = eval("(" + data + ")");
                    console.log(data);

                    var str = "<thead><th>序号</th><th>学号</th><th>姓名</th><th>性别</th> <th>出生日期</th><th>邮箱</th><th>备注</th></thead>";
                    if ($.isArray(data)) {

                        $.each(data, function (i, value) {

                            str += "<tr class='info'><td><input type='checkbox' class = 'ids' value='" + value.id + "'></td><td>"
                                + value.sid + "</td><td>"
                                + value.sname + "</td><td>"
                                + value.sex + "</td><td>"
                                + value.birthday + "</td><td>"
                                + value.email + "</td><td>"
                                + value.comment + "</td></tr>";
                        });
                    }else if ($.isPlainObject(data)){
                        str += "<tr class='info'><td><input type='checkbox' class = 'ids' value='" + data.id + "'></td><td>"
                            + data.sid + "</td><td>"
                            + data.sname + "</td><td>"
                            + data.sex + "</td><td>"
                            + data.birthday + "</td><td>"
                            + data.email + "</td><td>"
                            + data.comment + "</td></tr>";
                    }
                    tb1.html(str);
                    $("#page").empty();
                    if (data == null){
                        tb1.html("未找到相关员工");
                    }
                    return;
                }
            )
        }


        //删除用户
        function deleteStudent() {

            var ids = $(".ids:checked");
            var total = ids.length;

            //判断是否选择了需要删除的员工序号
            if (total === 0) {
                alert("请选择要删除的员工序号");
                return false;
            }
            var con = window.confirm("确定要删除这条数据吗？");
            var success_count = 0;

            if (con === true) {

                ids.each(function () {
                    $.post(
                        'delete',
                        {"id": $(this).val()},
                        function (data, status) {
                            if (data === 'success') {
                                success_count++;
                                alert(success_count);
                            }
                        }
                    )
                });

            }
            if (success_count === total) {
                alert("删除成功");
                location.reload();
            }

        }

        // 显示数据方法
        function showUpdateForm() {
            var ids = $(".ids:checked");

            //判断是否选择了一个复选框,是则获取选择的工号
            if (ids.length !== 1) {
                alert("请选择要编辑的员工序号");
                return false;
            } else {
                $.post(
                    'find',
                    {"id": ids[0].value},
                    function (data) {
                        data = eval("(" + data + ")");
                        $('#myModal').modal('show');
                        // 将获取到的数据显示到form表单中的元素
                        $("#id").val(data.id);
                        $("#sid").val(data.sid);
                        $("#sname").val(data.sname);
                        $("#sex").val(data.sex);
                        $("#birthday").val(data.birthday);
                        $("#email").val(data.email);
                        $("#comment").val(data.comment);
                    }
                )
            }
        }


        //保存新增员工数据或者修改已有员工信息
        function saveOrUpdateStudent() {
            var id = $("#id").val();
            if (id !== '') {
                updateStudent(id);
            } else {
                addStudent();
            }
        }

        //修改显示出来的数据并更新
        function updateStudent(id) {
            var sid = $("#sid").val();
            var sname = $("#sname").val();
            var sex = $("#sex").val();
            var birthday = $("#birthday").val();
            var email = $("#email").val();
            var comment = $("#comment").val();
            var data = {
                "id": id,
                "sid": sid,
                "sname": sname,
                "sex": sex,
                "birthday": birthday,
                "email": email,
                "comment": comment
            };
            $.post(
                'update',
                data,
                function (data, status) {
                    if (data === "success") {
                        alert("更新成功");
                        location.reload();
                        $(".ids").attr("checked", false);
                    }
                }
            );
            close()
        }

        //清空数据
        function clearStudent() {
            $("#id").val("");
            $("#sid").val("");
            $("#sname").val("");
            $("#sex").val("");
            $("#birthday").val("");
            $("#email").val("");
            $("#comment").val("");
        }

        //关闭
        function close() {
            $('#myModal').modal('hide');
            clearStudent();

        }

        $(document).ready(function () {


        })
    </script>
</head>

<body>
<%

    if (null == session.getAttribute("admin")) {
        response.sendRedirect("login.jsp");
    }
%>
<div align="center" style="margin: 15px;color: #948880;font-size: 20px">
    欢迎<%=null == session.getAttribute("admin") ? "" : ((Admin) session.getAttribute("admin")).getUsername()%>进入学生信息管理系统
</div>
<div style="margin: 15px;">
    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
    <button type="button" class="btn btn-info btn-sm" onclick="deleteStudent();">删除</button>
    <button type="button" class="btn btn-info btn-sm" onclick="showUpdateForm();">编辑</button>
    <button type="button" class="btn btn-info btn-sm" onclick="showStudent()">查询</button>
    <input type="text" id="find_sid" placeholder="按学号查询" style="width:75px">
    <input type="text" id="find_sname" placeholder="按姓名查询" style="width:75px">

</div>

<div class="table-responsive">
    <table class="table" id="tb1">
        <thead>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>邮箱</th>
        <th>备注</th>
        </thead>
        <%
            StudentService studentService = new StudentService();
            int total = studentService.studentFindCountService();

            int limit = 10;
            int totalPage = 0;
            if (total % limit != 0) {
                totalPage = total / limit + 1;
            } else {
                totalPage = total / limit;
            }
            int currentPage = 1;
            if (null != request.getParameter("page")) {
                currentPage = Integer.parseInt(request.getParameter("page"));
            }
            List<Student> list = studentService.studentFindAllService(currentPage, limit);
            for (int i = 0; i < list.size(); i++) {
                if (i % 2 == 0) {
                    out.println("<tr class='info'>");
                } else {
                    out.println("<tr class='warning'>");
                }
                //"+list.get(i).getId()+"
                out.println("<td><input type='checkbox' class = 'ids' value='" + list.get(i).getId() + "'></td>");
                out.println("<td>" + list.get(i).getSid() + "</td>");
                out.println("<td>" + list.get(i).getSname() + "</td>");
                out.println("<td>" + list.get(i).getSex() + "</td>");
                out.println("<td>" + list.get(i).getBirthday() + "</td>");
                out.println("<td>" + list.get(i).getEmail() + "</td>");
                out.println("<td>" + list.get(i).getComment() + "</td>");
                out.println("</tr>");
            }
        %>

    </table>

</div>
<%
    if (totalPage > 1) {
%>
<div class="bottom" align="center" id="page">
    <ul class="pagination pagination-sm">
        <% if (currentPage != 1) {%>
        <li><a href="?page=1">首页</a></li>
        <%}%>
        <li class="previous <% if(currentPage == 1){%>disabled<%}%>"><a
                href="<%= currentPage == 1?"#":"?page=" + (currentPage-1)%>">&larr;上一页</a></li>
        <%
            if (totalPage <= 9 && totalPage > 1) {
                for (int i = 1; i <= totalPage; i++) {
        %>
        <li<%= i == currentPage ? " class='active'" : ""%>><a href="?page=<%=i%>"><%=i%>
        </a></li>
        <%
            }
        } else if (totalPage > 9) {
            if (currentPage <= 5) {
                for (int i = 1; i <= 9; i++) {
        %>
        <li<%= i == currentPage ? " class='active'" : ""%>><a href="?page=<%=i%>"><%=i%>
        </a></li>
        <%
            }
        } else if (currentPage > 5 && currentPage <= totalPage - 4) {
            for (int i = currentPage - 4; i <= currentPage + 4; i++) {
        %>
        <li<%= i == currentPage ? " class='active'" : ""%>><a href="?page=<%=i%>"><%=i%>
        </a></li>
        <%
            }
        } else if (currentPage > totalPage - 4) {
            for (int i = totalPage - 8; i <= totalPage; i++) {
        %>
        <li<%= i == currentPage ? " class='active'" : ""%>><a href="?page=<%=i%>"><%=i%>
        </a></li>
        <%
                    }
                }
            }
        %>


        <li class="next" <% if(currentPage == totalPage){%>disabled<%}%>><a
                href="<%= currentPage==totalPage?"#":"?page="+ (currentPage +1)%>">下一页 &rarr;</a></li>
        <% if (currentPage != totalPage) {%>
        <li><a href="?page=<%=totalPage%>">末页</a></li>
        <%}%>
        <li class="col-md-offset-5"><a href="#"><%= "当前页" + currentPage + "/总页数" + totalPage%>
        </a></li>
    </ul>
</div>
<%
    }
%>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加员工信息</h4>
                <button type="button" class="close" data- dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <form action="#" method="post" onsubmit="saveOrUpdateStudent();return false;">
                    <input id="id" hidden="hidden"/>
                    <label for="sid">学号</label>
                    <input class="form-control" type="number" name="sid" id="sid" required="required"/><br/>
                    <!--required="required" 提交前必须填写-->
                    <label for="sname">姓名</label>
                    ：<input class="form-control" name="sname" id="sname" type="text" required="required"/><br/>

                    <label for="sex">性别</label>
                    <select class="form-control" name="sex" id="sex">
                        <option value="">--请选择--</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select><br/>
                    <label for="birthday">生日</label>
                    <input class="form-control" name="birthday" type="date" id="birthday" placeholder="请输入年"
                           required="required"/>
                    <br/>
                    <label for="email">邮箱</label>
                    <input class="form-control" name="email" type="email" id="email" required="required"/><br/>
                    <label for="comment">备注</label>
                    <input class="form-control" name="comment" type="text" id="comment" required="required"/><br/>

                    <button class="btn btn-success btn-lg" type="submit"><span
                            class="glyphicon glyphicon-floppy-saved"></span>保存
                    </button>
                    <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal"><span
                            class="glyphicon glyphicon-floppy-remove"></span>关闭
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

</html>